<template>
    <div>
        <div class="card-box">
            <el-card shadow="always" :body-style="{padding: '0',width: '300px'}">
                <div style="background-color: rgba(247, 150, 31, 0.967);width:100%;height:230px;padding:0">
                    <span>VIP1</span>
                    <span>¥4999/年</span>
                </div>
                <div>
                    <ul>
                        <li>短信推送60条/月</li>
                        <li>电脑远程桌面服务 12次/年</li>
                        <li>专属人工服务</li>
                    </ul>
                </div>
                <div class="buy-btn">
                    <el-button @click="handleBuy" type="primary" size="large" style="width: 80%;">立即购买</el-button>
                </div>
            </el-card>
            <el-card :body-style="{padding: '0',width: '300px'}">
                <div style="background-color: rgba(247, 150, 31, 0.967);width:100%;height:230px;padding:0">
                    <span>VIP2</span>
                    <span>¥5999/年</span>
                </div>
                <div>
                    <ul>
                        <li>短信推送90条/月</li>
                        <li>电脑远程桌面服务 18次/年</li>
                        <li>专属人工服务</li>
                    </ul>
                </div>
                <div class="buy-btn">
                    <el-button @click="handleBuy" type="primary" size="large" style="width:90%">立即购买</el-button>
                </div>
            </el-card>
            <el-card :body-style="{padding: '0',width: '300px'}">
                <div style="background-color: rgba(247, 150, 31, 0.967);width:100%;height:230px;padding:0">
                    <span>VIP3</span>
                    <span>¥6999/年</span>
                </div>
                <div>
                    <ul>
                        <li>短信推送60条/月</li>
                        <li>电脑远程桌面服务 24次/年</li>
                        <li>专属人工服务</li>
                    </ul>
                </div>
                <div class="buy-btn">
                    <el-button @click="handleBuy" type="primary" size="large" style="width:90%">立即购买</el-button>
                </div>
            </el-card>
        </div>
        <div style="margin-top: 50px;">
            <span @click="handlePK" class="pk"> >>>查看产品权益对比<<< </span>
        </div>
    </div>
    
    
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            handlePK(){
                this.$router.push({path:'/vip/pk'})
            },
            handleBuy(){
                this.$router.push({path:'/vip/buy'})
            }
        },
    }
</script>

<style lang="scss" scoped>
.card-box{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .image{
        display: block;
        width: 100%;
    }
    li{
        text-align: left;
        margin-top: 20px;
    }
    span{
        color:white;
        font-size: 34px;
        font-weight: 700;
        display: block;
        padding-top: 40px;
    }
    .buy-btn{
        height: 80px;
        line-height: 80px;
    }
}
.footer{
    height: 150px;
    width: 100%;
    background-color: pink;
}
.pk{
    font-size: large;
    cursor: pointer;
}
.pk:hover{
    color: pink;
}
</style>